<template>
  <div class="">
    <div>
      <left_statusVue></left_statusVue>
      <div class="right-box">
        <Top_status></Top_status>
        <ul class="center" id="center">
          <li v-for="index in displayactive" :key="index" :value="index"
            :style="choose_status == 0 ? 'display:block;' : 'display:none;'">
            <div class="maintext-box">
              <p class="maintext-left">活动主题：</p>
              <p class="maintext">{{ index.name }}</p>
            </div>
            <div class="tip">
              <p>活动时间：{{ index.time }}</p>
              <div>
                <p>每人最多{{ index.maxchoose }}票</p>
                <!-- $event.target传入当前对象 -->
                <button class="btn btn-success" :id="index.id" @click="choose($event.target)">
                  参与投票
                </button>
              </div>
            </div>

            <!-- 清除浮动效果的高度塌陷 -->
            <div style="clear: both"></div>
          </li>

          <div :style="choose_status == 1 ? '' : 'display:none;'" class="choose_main_box">
            <div class="choose_top">
              <button class="btn btn-default" @click="back()">返回</button>
            </div>
            <div style="clear: both"></div>
            <div class="choose_main">
              <div>
                <p style="float: left" class="theme">活动主题：</p>
                <div style="clear: both"></div>
              </div>
              <div class="choose_main_text">
                <!-- 下标从0开始 id从1开始 -->
                <!-- {{ active[this.choose_id-1] }} -->
                <p id="choose_center_text">请返回选择相关的选项</p>
              </div>
              <div class="tip">
                <p>活动时间：{{ active[choose_id - 1].time }}</p>
                <div>
                  <p>每人最多{{ active[choose_id - 1].maxchoose }}票</p>
                </div>
              </div>
              <div style="clear: both"></div>
            </div>
            <div class="option_box">
              <div v-for="item in option" :key="item.id" class="option_list">
                <p class="option_top">选项{{ item.top }}：</p>
                <div style="clear: both"></div>
                <button class="option_center" :style="myoption_id == item.id ? 'border: solid 1px #e20000' : ''
                  " :id="'choose_' + item.id" @click="option_choose($event.target)">
                  {{ item.center }}
                </button>
                <div style="clear: both"></div>
              </div>
            </div>
            <div>
              <button class="btn btn-success Con_vote">确认投票</button>
            </div>
          </div>
          <!-- <button @click="mytry()">尝试</button> -->

          <!-- pager-count 能够显示的最多页码 -->
          <el-pagination :page-size="1" :pager-count="5" layout="prev, pager, next" :total="total"
            @current-change="pagechange" :style="choose_status == 0 ? '' : 'display:none;'" />
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import left_statusVue from '@/components/left_status/left_status.vue';
import Top_status from '@/components/top_status/top_status.vue';

export default {
  data() {
    return {
      active: [
        {
          id: "1",
          name: "关于2024年11月4日的最佳男明星竞选",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "1",
        },
        {
          id: "2",
          name: "关于2024年11月4日",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "2",
        },
        {
          id: "3",
          name: "关于2024年11月4日的最佳男明星竞选",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "3",
        },
        {
          id: "4",
          name: "关于2024年11月4日的最佳男明星竞选",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "4",
        },
        {
          id: "5",
          name: "关于2024年11月4日的最佳男明星竞选",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "5",
        },
        {
          id: "6",
          name: "关于2024年11月4日的最佳男明星竞选",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "6",
        },
        {
          id: "7",
          name: "关于2024年11月4日的最佳男明星竞选",
          time: "2024年11月4日-2024年12月4日",
          maxchoose: "7",
        },
      ],
      option: [
        {
          id: "1",
          top: "A",
          center:
            "李大伟李大伟李大伟李大伟李大伟李大伟李大伟李大伟李大伟李大伟李大伟",
        },
        {
          id: "2",
          top: "B",
          center: "陆长寻",
        },
        {
          id: "1",
          top: "C",
          center: "张三丰",
        },
        {
          id: "1",
          top: "D",
          center: "王大武",
        },
      ],
      myoption_id: 0, //我的选择 选项的id
      total: 1, //默认总页数
      page: 1, //默认页数

      M: 0, //当前显示条例的开头
      N: 7, // 你想显示数量的结尾  显示数量=尾-头
      newM: 0, //临时存储M
      newtotal: 0, //临时存储total
      choose_status: 0, //判断当前是否已选中 0为未选中 1为选中状态
      // 选中的id
      choose_id: 1, //选中当前的投票活动
      choose_option_count: 0, //选中当前的选项个数

      choose_option: [], //选中对象数组
    };
  },
  components: {
    left_statusVue,
    Top_status,
  },
  created() {
    let newtotal = this.active.length / (this.N - this.M);
    this.total = newtotal; //更新总页数
    // console.log(newtotal);
  },
  computed: {
    displayactive() {
      // 通过计算属性控制 显示条例个数
      return this.active.slice(this.M, this.N);
    },
  },
  methods: {
    // 在活动中 选中某个将投票选项
    option_choose(data) {
      function hasClass(element, className) {
        // 定义判断是否具备一个样式的方法
        const replacedName = element.className.replace(/\t*\s+/g, " "); //避免空格 tab等特殊占位的非样式影响
        return (" " + replacedName + " ").indexOf(" " + className + " ") > -1;
      }
      let choose_p = data.previousElementSibling.previousElementSibling; //文字

      // console.log(hasClass(data,'opteion_choose'));
      if (hasClass(data, "opteion_choose")) {
        //删除红色选中样式
        console.log("dsfa");
        data.classList.remove("opteion_choose");
        choose_p.classList.remove("opteion_choose");
        this.choose_option_count--;
      } else {
        // 没有样式时添加

        if (
          this.choose_option_count <=
          this.active[this.choose_id - 1].maxchoose - 1
        ) {
          //当他小于当前选中的最大选中数时
          this.choose_option_count++;
          data.classList.add("opteion_choose");
          choose_p.classList.add("opteion_choose");
          // console.log(this.active[this.choose_id].maxchoose-1);
        } else {
          alert("大于当前最大选中数！");
        }
      }

      // console.log(hasClass(data,'opteion_choose'));
    },
    // 选中活动
    choose(data) {
      // console.log(data);
      console.log(data.parentNode.parentNode.parentNode);
      // this.newM=this.M
      // this.M=this.N+1 //将起始位置置于后端
      this.newtotal = this.total; //存储页数
      this.total = 0; //将页数置零
      this.choose_status = 1; //已选中
      this.choose_id = data.id;
      console.log(data.id);
      document.getElementById("choose_center_text").innerHTML =
        this.active[this.choose_id - 1].name; //获取并将标题内容赋值
    },
    // 返回按钮
    back() {
      this.choose_status = 0; //将显示状态 改为未选中
      this.total = this.newtotal; //将页数置零
      this.newtotal = 0; //将默认值重置
      let a = document.getElementsByClassName("opteion_choose"); //样式重置
      let i = 0;
      while (i < a.length) {
        console.log("hello");
        a[i].classList.remove("opteion_choose"); //将颜色全部移除
      }

      this.choose_option_count = 0; // 重置选中数
    },
    mytry() {
      console.log(document.getElementsByClassName("opteion_choose"));
      console.log(document.getElementsByClassName("opteion_choose").length);
    },

    // 下方跳转页面
    pagechange(data) {
      // console.log('hello',data);
      // console.log(this.M,this.N);
      // data为点击转跳的页码
      if (data > this.page) {
        //如果转跳页面大于当前页数
        // console.log("往后");
        let a = this.M;
        let shownum = this.N - a; //一页展示的个数
        // console.log(shownum);

        this.M += (data - this.page) * shownum; //将当前的页面转为转跳的位置
        this.N += (data - this.page) * shownum;
        // console.log(this.M,this.N);
        this.page = data;
        // console.log('当前页'+this.page);
      } else {
        // console.log('往前');
        let a = this.M;
        let shownum = this.N - a; //一页展示的个数
        // console.log(shownum);

        this.M -= (this.page - data) * shownum; //将当前的页面转为转跳的位置
        this.N -= (this.page - data) * shownum;
        // console.log(this.M,this.N);
        this.page = data;
        // console.log('当前页'+this.page);
      }
    },

  },
};
</script>

<style scoped>
.center {
  width: 75vw;
  height: 80vh;
  border: solid 1px #7c7c7c;
  margin-top: 45px;
  margin-right: 70px;

  /* padding-top: 25px; */
  float: right;
  padding: 20px 40px 0px 40px;
}

.center li .maintext-box {
  display: flex;
  /* margin-top: 0px;
  margin-left: 5%; */

  font-size: 24px;
  color: #000000;
  /* width: 68vw; */
  height: 5vh;
  font-size: 20px;
}

.center li div .maintext {
  display: flex;
  width: 100%;
  height: 5vh;
  border: solid 1px #7c7c7c;
  align-items: center;
  justify-content: flex-start;
  /* padding: 0px 0px 0 6px; */
}

.maintext-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 10px;
  width: 115px;
}

.tip {
  margin: 0px;
  /* display: flex;
  justify-content: space-between; */
  /* padding: 3px 5vw 0 5%; */
}

.tip p {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #737373;
  float: left;
  margin-top: 10px;

  line-height: 25px;
}

.tip div {
  float: right;
}

.btn-success {
  margin-left: 15px;
  padding: 4px 10px;
  margin-top: 4px;
}

.choose_main_box {
  height: 95%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.choose_top {
  display: flex;
  justify-content: flex-end;
}

.theme {
  font-size: large;
  margin: 0%;
}

.choose_main {
  font-size: 20px;
}

.choose_main_text {
  border: solid 1px #7c7c7c;
  height: 15vh;
  display: flex;
  padding: 5px;
  text-align: left;
}

.choose_main_text p {
  width: 100%;
  word-wrap: break-word;
  /* 旧版浏览器支持 */
  overflow-wrap: break-word;
  /* 标准属性 */
}

.option_box {
  /* height: 60%; */
  /* display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: space-between; */
  margin-bottom: 10px;
}

.option_list {
  width: 30%;
  display: inline-flex;
  min-width: 50%;
  min-height: 70px;
  font-size: 20px;
}

.option_top {
  /* float: left; */
  width: 65px;
}

.option_center {
  /* float: left; */
  width: -webkit-fill-available;
  border: 1px solid rgb(124, 124, 124);
  /* 每增加一个元素高度减少10px */
  height: calc(10px * var(--count) + 80px);
  text-align: center;
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin-bottom: 5px;

  display: flex;
  align-items: center;
  background-color: transparent;
}

.Con_vote {
  width: 100px;
}

:root {
  --count: 1;
}

.opteion_choose {
  color: red;
  border-color: red;
}

.option_no_choose {
  color: black;
  border-color: rgb(124, 124, 124);
}
</style>